<template>
  <!-- 一单成页面 -->
  <view class="orderSucceed">
    <child-header-bar :childTitle="childTitle" @getMarginTop="getMarginTop"></child-header-bar>
	
    <view class="orderSucceed-content" :style="[{'top': top + 'px'}]">

      <view class="oc-background">
        <image src="/myPackageB/static/orderSucceed/oc-back.png" mode=""></image>
      </view>
      <view class="oc-order-list">
        <view class="oc-list-item" v-for="(item, index) in orderList" :key="index">
          <view class="list-item-questions">
            <image :src="'/myPackageB/static/orderSucceed/op-'+(index+1)+'.png'"></image>
            <view class="question-title">
              {{item.question}}
              <view class="question-two" v-if="item.questionTwo">{{item.questionTwo}}</view>
            </view>
          </view>
          <block class="" v-if="item.isRadio">
            <radio-group class="option-box" @change="bandleChange($event, item.name)">
              <radio class="op-item" :class="item.column == 3 ? 'more-option' : 'two-option'"
                v-for="(item1, index1) in item.options" :key="index1" :value="item1.content">
                {{item1.content}}
              </radio>
            </radio-group>
          </block>
          <block class="" v-else>
            <checkbox-group class="option-box" @change="checkboxChange($event, item.name)">
              <label class="op-item" :class="item.column == 3 ? 'more-option' : 'two-option'"
                v-for="(item1, index1) in item.options" :key="index1">
                <checkbox :value="item1.content" />{{item1.content}}
              </label>
            </checkbox-group>
          </block>
        </view>
        <!-- 按钮 -->
        <view class="btn" @click="toOrderResult">生成行程单</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
		  imgurl:'',
		 canvasShow:true,
        top: 0, //距离顶部距离
        childTitle: '一单成', //标题
        orderParam: {

        },
        orderList: [{ //表单列表
          isRadio: true, //是否单选
          question: '你的滑雪目的是哪里？',
          name: 'questionOne',
          column: 3,
          options: [{
            content: '长春市',
            cid: 1
          }, {
            content: '吉林市',
            cid: 2
          }, {
            content: '通化市',
            cid: 3
          }, {
            content: '长白山',
            cid: 4
          }, {
            content: '延边州',
            cid: 5
          }, {
            content: '其他',
            cid: 6
          }, ]
        }, {
          isRadio: true,
          question: '你是否有滑雪经验？',
          name: 'questionTwo',
          column: 3,
          options: [{
            content: '新手小白',
            cid: 1
          }, {
            content: '曾经体验',
            cid: 2
          }, {
            content: '我是高手',
            cid: 3
          }, ]
        }, {
          isRadio: true,
          question: '你计划进行日场还是夜场滑雪？',
          name: 'questionThree',
          column: 3,
          options: [{
            content: '日场',
            cid: 1
          }, {
            content: '夜场',
            cid: 2
          }]
        }, {
          isRadio: true,
          question: '你的每日住宿预算是多少钱？',
          name: 'questionFour',
          column: 3,
          options: [{
            content: '¥200以下',
            cid: 1
          }, {
            content: '¥200-300',
            cid: 2
          }, {
            content: '¥300-500',
            cid: 3
          }, {
            content: '¥500-1000',
            cid: 4
          }, {
            content: '¥1000以上',
            cid: 5
          }]
        }, {
          isRadio: false,
          question: '你最想品尝的吉林美食是什么？',
          questionTwo: '(可选1-2项)',
          column: 2,
          name: 'questionFive',
          options: [{
            content: '传统东北菜',
            cid: 1
          }, {
            content: '朝鲜族美食',
            cid: 2
          }, {
            content: '火锅',
            cid: 3
          }, {
            content: '烧烤',
            cid: 4
          }, ]
        }, {
          isRadio: true,
          question: '你计划选择哪种交通方式往返雪场？',
          name: 'questionSix',
          column: 2,
          options: [{
            content: '私家车自驾',
            cid: 1
          }, {
            content: '滑雪场专线公交车',
            cid: 2
          }, {
            content: '租车自驾',
            cid: 3
          }, {
            content: '包车接送',
            cid: 3
          }, ]
        }]
      }
    },
	onLoad(){
	
	},
    onShow() {
      console.log(123)
      // 进入一单成后，如果没有登录，跳转到登录页面
      let mobilePhone = uni.getStorageSync('phonenumber')
      console.log(mobilePhone)
      if (!mobilePhone) {
        uni.showToast({
        	title: '请登录',
          icon: 'none',
        	duration: 2000
        });
        setTimeout(function() {
          uni.hideToast();
          uni.navigateTo({
            url: '/pages/login/index'
          })
        }, 2000);
      }



    },
    methods: {
		onShareAppMessage() {
		return {
		    title: '一单成',
		    imageUrl: this.img,
		  }
		},
		onShareTimeline() {
		  return {
		    title: '一单成',
		    imageUrl: this.img,
		  }
		},
      // 单选方法
      bandleChange(e, name) {

        this.$set(this.orderParam, name, e.detail.value)
      },
      // 多选方法
      checkboxChange(e, name) {
        if (e.detail.value.length > 2 || e.detail.value.length == 0) {
          uni.showToast({
            title: '请选择1-2项',
            icon: 'none'
          })
          Reflect.deleteProperty(this.orderParam, 'questionFive')
          return
        }
        this.$set(this.orderParam, name, e.detail.value.join(","))

      },
      // 动态接收导航栏高度
      getMarginTop(marginTop) {
        this.top = marginTop ? marginTop : 150
      },
      // 跳转到生成结果页面
      toOrderResult() {
        let params = Object.keys(this.orderParam);
        console.log(params)
        // 简单的验证
        if (params.length < this.orderList.length) {
          uni.showToast({
            title: '请完整并正确选择表单',
            icon: 'none',
            duration: 2000
          })
          return;
        }
        uni.navigateTo({
          url: '/myPackageB/pages/orderResult/orderResult?params=' + JSON.stringify(this.orderParam)
        })

      }
    }
  }
</script>
<style>
  page {
    width: 100%;
    height: 100%;
    background-color: #F8FAFE;
  }
</style>
<style lang="scss">
  .orderSucceed-content {
    position: absolute;

    // padding: 0 30rpx;
    .oc-background {
      width: 750rpx;
      height: 487rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    // 表单
    .oc-order-list {
      padding: 0 30rpx;
      position: absolute;
      top: 327rpx;

      .oc-list-item {
        width: 650rpx;
        margin: 0 20rpx;
        // height: 250rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        margin-bottom: 20rpx;

        .list-item-questions {
          display: flex;
          align-items: center;
          padding-top: 20rpx;
          margin-left: -20rpx;
          margin-bottom: 30rpx;


          image {
            width: 66rpx;
            height: 38rpx;
          }

          .question-two {
            font-size: 22rpx;
            color: #303030;
            font-weight: normal !important;
          }

          .question-title {
            margin-left: 10rpx;
            font-size: 32rpx;
            font-weight: bold;
            color: #303030;
            display: flex;
            align-items: center;
          }
        }

        .option-box {
          display: flex;
          flex-wrap: wrap;
          padding: 0 23rpx;

          .op-item {
            margin-bottom: 50rpx;
            font-size: 28rpx;
          }
        }

        .more-option {

          width: 33.3%;
        }

        .two-option {
          width: 46%;
        }

        // 单选框样式
        radio .wx-radio-input {
          width: 41rpx;
          height: 41rpx;
          border-radius: 50%;
          background-color: #EFF1F4 !important;
          border-color: #EFF1F4 !important;
        }

        radio .wx-radio-input.wx-radio-input-checked {
          /* 背景颜色 */
          background-color: #EFF1F4 !important;
          /* 边框颜色 */
          border-color: #EFF1F4 !important;
        }

        /* 选中后的实心样式*/
        radio .wx-radio-input.wx-radio-input-checked::before {
          /* 将对号去掉 */
          content: '';
          /*实心圆圈的大小*/
          width: 33rpx;
          height: 33rpx;
          /*将圆角设置成50%才是一个圆*/
          border-radius: 50%;
          /*圆圈颜色*/
          background-color: #69E39F;
        }

        // 复选框样式
        checkbox .wx-checkbox-input {
          width: 41rpx;
          height: 41rpx;
          background: #EFF1F4;
          border-radius: 10rpx;
          border-color: transparent !important;
        }

        // 复选框选中样式
        checkbox .wx-checkbox-input.wx-checkbox-input-checked {
          background: #EFF1F4;
        }

        // 复选框选中之后对号的样式
        checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
          color: #69E39F;
          font-weight: 600;
        }
      }


      .btn {
        margin-top: 30rpx;
        margin-bottom: 50rpx;
        width: 690rpx !important;
        height: 100rpx !important;
        background: #88F79C !important;
        box-shadow: 0rpx 5rpx 10rpx 1rpx rgba(0, 0, 0, 0.1) !important;
        border-radius: 50rpx !important;

        font-size: 36rpx;
        color: #303030;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

</style>